<template>
	<view >
		<view class="">
			<!-- 添加商品 -->
			<view style="display: flex;width: 700rpx;background-color: white;border-radius: 20rpx;margin: 20rpx auto 0 auto;align-items: center;height: 100rpx;" @click="zeng_gai_fenlei()">
				<uni-icons style="margin-left: 35rpx;margin-right: 20rpx;" type="plusempty" size="20"></uni-icons>
				添加分类！
			</view>
			<view v-if="is_shangpinfenleilist==0">
				没有分类
			</view>
			<view v-else v-for="(item,index) in shangpinfenleilist" :key="index" style="display: flex; align-items: center; overflow: hidden; width:700rpx;height: 100rpx; margin: 15rpx auto 15rpx auto;border-radius:15rpx;box-shadow: 2rpx 2rpx 3rpx 4rpx #c2c2c2;" @click="zeng_gai_fenlei(item)">
				<!-- <image style="width: 100rpx;height: 100rpx;border-radius:15rpx;" :src="item.url" mode=" scaleToFill"></image> -->
				<view style="display: flex;margin: 0 20rpx 0 20rpx;">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 下面是点 添加/修改 商品分类 使用 -->
		<model v-if='add_fenlei_show' @colseModel='add_fenlei_show = false'>
				<view style="display:flex;padding: 40rpx;flex-direction: column;">
					<view style="display: flex;flex: 3;justify-content: center;font-weight: 700;">
						{{zeng_gai?'修改商品分类':'添加商品分类'}}
					</view>
				</view>
				<view style="display: flex;flex-direction: column;">
					<!-- <view style="margin-bottom: 20rpx;">
						选择图片（图片高宽比为 1：4）
					</view>
					<view v-if="fenlei_tupian_show && zeng_gai " style="display: flex;flex-direction: row; width:240rpx;height: 240rpx;border-style: solid; border-width: 5rpx;border-color:#c2c2c2; border-radius: 20rpx;"  >
						<image style="display: flex;width:240rpx;height: 240rpx;z-index: 2;" :src="fenlei_url" mode="aspectFit"></image>
						<uni-icons style="display: flex;margin: 5rpx 0 0 -60rpx; font-size: 60rpx;color: #7F7F7F;z-index: 5;" type="clear" @click="delpic(fenlei_url)"></uni-icons>
					</view> -->
					<!-- <view style="display: flex;justify-content: center;" >
						<uni-file-picker v-if="file_picker_show || !zeng_gai" limit="1" :del-icon="true" mode="grid" return-type="object" :imageStyles="imageStyles" file-mediatype="image" @success="fanhuiurl" @delete="delpic"></uni-file-picker>
					</view> -->
				</view>
				<view style="display: flex;margin:30rpx 0 20rpx 0;">商品分类名称</view>
				<input style="padding: 15rpx 25rpx; border-radius: 9rpx;box-shadow: 1px 1px 5px #c2c2c2;" type="text" v-model="fenlei_name" focus placeholder="请输入商品的名称">
				
				<view style="display: flex;flex-direction: row;margin-top: 80rpx;justify-content: center;">
					<view style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;padding: 10rpx;" @click="tijiaoshangpin">
						{{zeng_gai?'修改':'提交'}}
					</view>
					<view style="display: flex;width: 120rpx;border-radius: 15rpx;background-color: blue;color: white;justify-content: center;align-items: center;margin-left: 60rpx;padding: 10rpx;" @click="add_fenlei_show = false">
						返回
					</view>
				</view>
				<view v-if="meiyi_userinfo.permission.indexOf('del_shangpinfenlei')!=-1" style="display: flex;color: dodgerblue;margin-top: 50rpx;justify-content: center;" @click="shan_fenlei(fenlei_id)">
					删除分类
				</view>
		</model>
	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	import model from '../../components/model.vue'
	export default {
		components: {
			model
		},
		data() {
			return {
				meiyi_userinfo:{
					Permissions:[]
				},
				shangpindetail:'',
				fenlei:'',
				goods_fenlei_lists:[],
				imageStyles: {
					width: 140,
					height:140,
					border: {
						radius:'20rpx'
					}
				},
				shangpinfenleilist:[],
				add_fenlei_show:false,//添加商品时弹窗
				fenlei_tupian_show:true,//修改商品时，图片是否显示
				file_picker_show:false,//修改商品时，图片上传窗口是否显示
				is_shangpinfenleilist:9,//是否有商品列表
				fenlei_name:'',//商品名称
				goods_price:'',//商品价格
				fenlei_url:'',//商品图片的地址
				zeng_gai:'',//判断修改还是提交
				fenlei_id:'',//商品的ID
			}
		},
		async onLoad() {
			let meiyi_name_tel =await uni.getStorageSync('meiyi_name_tel')
			this.jingshouren = meiyi_name_tel.name + meiyi_name_tel.mobile
			this.meiyi_userinfo = await uniCloud.getCurrentUserInfo()
			this.cha_fenleifun()
		},
		methods: {
			//删除图片
			delpic(){
				uni.showLoading({
					title: '删除中……',
					mask: true
				});
				uniCloud.callFunction({
					name:"fun",
					data:{
						leixing:2,
						picurl:this.fenlei_url
					}
				}).then(res=>{
					this.fenlei_url=[]
					this.fenlei_tupian_show=false
					this.file_picker_show=true
					uni.hideLoading()
				})
			},
			// 上传成功
			fanhuiurl(e){
				this.fenlei_url=e.tempFiles[0].fileID
				this.file_picker_show=false
				this.fenlei_tupian_show=true
			},
			//获取分类
			cha_fenleifun(){
				uni.showLoading({
					title:"分类获取中……"
				})
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:33,
					}
				}).then(res=>{
					uni.hideLoading()
					if(res.result.data.length==0){
						this.is_shangpinfenleilist=0
					}
					this.shangpinfenleilist=res.result.data
					
				})
			},
			//提交或修改商品
			tijiaoshangpin(){
				// if(this.zeng_gai){
					if(!this.fenlei_name ){
						uni.showToast({
							title: '请填写分类名称',
							icon: 'none',
							duration: 1000
						})
						return
					}
				// }
				this.add_fenlei_show=false
				uni.showLoading({
					title:"商品提交中……",
					mask:true
				})
				if(this.zeng_gai){
					if(this.yuan_fenleiname==this.fenlei_name){
						console.log('000');
						this.file_picker_show=false
						uni.hideLoading()
						return
					}
					uniCloud.callFunction({
						name:"funshare",
						data:{
							leixing:34,//改--商品分类
							time:getDateTime.dateTimeStr('y-m-d h:i:s'),
							name:this.fenlei_name,
							id:this.fenlei_id,
							jingshouren:this.jingshouren
						}
					}).then(res=>{
						uni.hideLoading()
						this.fenlei_name=this.zeng_gai=this.fenlei_id=''
						this.file_picker_show=false
						this.cha_fenleifun()
					})
				}else{
					uniCloud.callFunction({
						name:"funshare",
						data:{
							leixing:35,//增--商品
							time:getDateTime.dateTimeStr('y-m-d h:i:s'),
							name:this.fenlei_name,
							jingshouren:this.jingshouren
						}
					}).then(res=>{
						this.file_picker_show=false
						this.fenlei_name=this.zeng_gai=''
						uni.hideLoading()
						this.cha_fenleifun()
					})
				}
			},
			//点击进入商品修改页面
			zeng_gai_fenlei(e){
				this.fenlei_name=this.zeng_gai=this.fenlei_id=''
				// this.fenlei_tupian_show=false
				if(e){
					this.yuan_fenleiname=this.fenlei_name=e.name
					this.zeng_gai=e.name
					this.fenlei_id=e._id
				}
				this.add_fenlei_show=true
			},
			//删除本分类
			shan_fenlei(){
				uni.showLoading({
					title:"删除中……",
					mask:true
				})
				this.add_fenlei_show=false
				//删除本条记录
				uniCloud.callFunction({
					name:"funshare",
					data:{
						id:this.fenlei_id,
						leixing:36,//删除本条记录
					}
				}).then(res=>{
					 this.cha_fenleifun()
				})	
			},
		}
	}
</script>

<style>

</style>
